<template>
  <div class="PictureList">
    <div class="flex flex-wrap pr-[8px] py-[8px]">
      <div
        class="PictureItme mr-2 mb-3"
        style="width: 85px"
        v-for="(item, index) in PictureList"
        :key="item.image_link"
      >
        <el-tooltip placement="right-start">
          <template #content>
            {{ item.image_source_text }}<br />{{ item.create_user_text }}
            {{ item.create_time }}
          </template>
          <div class="mb-2 relative">
            <el-checkbox
              :style="{ display: !showCheckbox ? 'none' : '' }"
              v-model="item.checked"
              label=""
              class="absolute right-0.5 -top-2"
            />
            <video
              v-if="props.imageType === 4"
              :src="item.image_link"
              controls="controls"
              style="width: 85px; height: 85px"
            >
              您的浏览器不支持 video 标签。
            </video>
            <VImage
              :preview="false"
              v-if="props.imageType !== 4"
              :src="item.image_link_watermark || item.image_link"
              :width="85"
              :height="85"
              @click="showImage(item, PictureList)"
            ></VImage>
          </div>
        </el-tooltip>
        <div class="line1">{{ item.image_name }}</div>
        <div class="text-[#999]">{{ item.image_for_text }}</div>
      </div>
    </div>
    <DialogImage ref="DialogImageRef"></DialogImage>
  </div>
</template>
<script setup name="List">
import VImage from "@/components/Image/index.vue";
import DialogImage from "@/components/DialogImage/index.vue";
import { photoSort } from "@/utils/index";

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
  imageType: {
    type: Number,
  },
  showCheckbox: {
    type: Boolean,
    default: true,
  },
});
const PictureList = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit("update:modelValue", val);
  },
});
const handleDel = (index) => {
  PictureList.value.splice(index, 1);
};

const DialogImageRef = ref();
const showImage = (row, list) => {
  DialogImageRef.value.open(photoSort(row, list));
};
</script>

<style lang="scss" scoped></style>
